import { BasicColumn, FormSchema } from '/@/components/Table';

import { h, reactive } from 'vue';
import { Tag, Switch, Image } from 'ant-design-vue';

import { useMessage } from '/@/hooks/web/useMessage';
// import { setRoleStatus } from '/@/api/demo/system';
// import { Icon } from '/@/components/Icon';

import { useDebounceFn } from '@vueuse/core';
import { getRoleList } from '/@/api/admin/user';

import { getModelAllListApi, MODEL_TYPE, statusSwitchApi } from '/@/api/config-center/model-design';

import { getDictTypeListApi } from '/@/api/admin/dict';
import { DICT } from '/@/enums/dict';
let modelList: any[] = [];
export const resetModelList = () => {
  modelList = [];
};

// const modelCompenentName = {
//   '1': '/com-model-table/index',
//   '3': '/com-model-complex/index',
// };

export const columns: BasicColumn[] = [
  {
    title: '菜单名称',
    dataIndex: 'moduleName',
    align: 'left',
  },
  // {
  //   title: '标识',
  //   dataIndex: 'id',
  //   width: 80,
  // },
  {
    title: '背景颜色',
    dataIndex: 'typeEx1Name',
    // width: 120,
  },
  {
    title: '图标',
    dataIndex: 'icon',
    // width: 80,
    customRender: ({ record }) => {
      return h(Image, { width: 60, src: record.icon });
    },
  },
  {
    title: '排序',
    dataIndex: 'typeOrder',
  },
  {
    title: '跳转路径',
    dataIndex: 'path',
  },
  // {
  //   title: '重定向路径',
  //   dataIndex: 'redirect',
  // },
  {
    title: '启用状态',
    dataIndex: 'typeStatus',
    // width: 80,
    // customRender: ({ record }) => {
    //   const status = record.typeStatus;
    //   const enable = ~~status === 0;
    //   const color = enable ? 'green' : 'red';
    //   const text = enable ? '启用' : '禁用';
    //   return h(Tag, { color: color }, () => text);
    // },
    customRender: ({ record }) => {
      if (!Reflect.has(record, 'pendingStatus')) {
        record.pendingStatus = false;
      }
      return h(Switch, {
        checked: record.typeStatus === 0,
        loading: record.pendingStatus,
        onChange(checked: boolean) {
          record.pendingStatus = true;
          const newStatus = checked ? 0 : 1;
          const { createMessage } = useMessage();
          try {
            statusSwitchApi({ moduleId: record.moduleId, modelId: newStatus });
            record.typeStatus = newStatus;
            createMessage.success(`已成功修改菜单状态`);
          } catch {
            createMessage.error('修改菜单状态失败');
          } finally {
            record.pendingStatus = false;
          }
        },
      });
    },
  },
  {
    title: '显示状态',
    dataIndex: 'visible',
    // width: 80,
    customRender: ({ record }) => {
      const visible = record.visible;
      const enable = ~~visible === 1;
      const color = enable ? 'green' : 'red';
      const text = enable ? '显示' : '隐藏';
      return h(Tag, { color: color }, () => text);
    },
  },
];

export const columnsAuth: BasicColumn[] = [
  {
    title: '标识',
    dataIndex: 'userFlag',
    width: 80,
  },
  {
    title: '描述',
    dataIndex: 'flagDesc',
  },
  {
    title: '用户设置',
    dataIndex: 'userRoles',
  },
];

export const formSchemaAuth: FormSchema[] = [
  {
    field: 'userFlag',
    label: '标识',
    component: 'InputNumber',
    required: true,
  },
  {
    field: 'flagDesc',
    label: '权限描述',
    component: 'Input',
    required: true,
  },
  {
    field: 'summary',
    label: '简要说明',
    component: 'Input',
  },
  {
    field: 'roleIds',
    label: '使用角色',
    component: 'ApiSelect',
    componentProps: {
      api: getRoleList,
      labelField: 'roleName',
      valueField: 'roleId',
      mode: 'multiple',
    },
  },
];

export const actionAuths: BasicColumn[] = [
  {
    title: '标识',
    width: 80,
    dataIndex: 'handleId',
  },
  {
    title: '名称',
    dataIndex: 'handleName',
  },
  {
    title: '描述',
    dataIndex: 'summary',
  },
];

export const formSchemaAction: FormSchema[] = [
  // {
  //   field: 'handleId',
  //   label: '标识',
  //   component: 'InputNumber',
  //   required: true,
  // },

  {
    field: 'handleType',
    label: '操作类型',
    required: true,
    component: 'ApiSelect',
    defaultValue: 0,
    componentProps: {
      allowClear: false,
      api: getDictTypeListApi,
      labelField: 'label',
      valueField: 'intValue',
      params: {
        type: DICT.HANDLE_TYPE,
      },
      getPopupContainer: () => document.body,
    },
  },
  {
    field: 'handleName',
    label: '名称',
    component: 'Input',
    required: true,
  },
  {
    field: 'handleOrder',
    label: '排序',
    component: 'InputNumber',
    required: true,
  },
  {
    field: 'handleCode',
    label: '操作编码',
    component: 'Input',
  },

  {
    field: 'bindImg',
    label: '图标',
    component: 'IconPicker',
  },
  {
    field: 'roleIds',
    label: '使用角色',
    component: 'ApiSelect',
    componentProps: {
      api: getRoleList,
      labelField: 'roleName',
      valueField: 'roleId',
      mode: 'multiple',
    },
  },
  {
    field: 'summary',
    label: '描述',
    component: 'Input',
  },
];

// const isDir = (type: string) => type === '0';
// const isMenu = (type: string) => type === '1';
// const isFunctionMenu = (type: number) => type === 2;

export const searchFormSchema: FormSchema[] = [
  {
    field: 'moduleName',
    label: '菜单名称',
    component: 'Input',
    colProps: { span: 8 },
  },
];

const listModuleParam = reactive({ classify: MODEL_TYPE.LIST, modelName: '', client: 0 });

export const formSchema: FormSchema[] = [
  {
    field: 'moduleName',
    label: '菜单名称',
    component: 'Input',
    required: true,
  },
  // {
  //   field: 'moduleId',
  //   label: '菜单ID',
  //   component: 'InputNumber',
  //   // colProps: { lg: 24, md: 24 },
  //   // required: true,
  //   dynamicDisabled: true,
  //   ifShow: false,
  // },
  // {
  //   field: 'parentId',
  //   label: '上级菜单',
  //   required: true,
  //   component: 'TreeSelect',
  //   componentProps: {
  //     allowClear: false,
  //     fieldNames: {
  //       label: 'name',
  //       key: 'id',
  //       value: 'id',
  //     },
  //     getPopupContainer: () => document.body,
  //   },
  // },
  {
    field: 'typeOrder',
    label: '排序',
    component: 'InputNumber',
    required: true,
  },
  {
    field: 'typeEx1Name',
    label: '背景颜色',
    component: 'ColorPicker',
    required: false,
    defaultValue: '#2B63A1',
    componentProps: {
      input: true,
    },
  },

  {
    field: 'path',
    label: '跳转路径',
    required: true,
    component: 'ApiSelect',
    componentProps() {
      return {
        allowClear: false,
        showSearch: true,
        optionFilterProp: 'label',
        api: async (data) => {
          const ret = await getDictTypeListApi(data);
          // console.log(
          //   '%cret===>273： ',
          //   'background: rgb(23, 197, 237,.6); color: #ff5023; font-size:18px;font-weight:700',
          //   ret,
          // );
          ret.forEach((el) => {
            el.label = `${el.label}(${el.value})`;
          });
          return ret;
        },
        labelField: 'label',
        valueField: 'value',
        params: {
          type: DICT.APP_DIC_TYPE,
        },
        getPopupContainer: () => document.body,
      };
    },
  },
  {
    field: 'modelClassify',
    label: '模型类型',
    component: 'ApiSelect',
    componentProps({ formModel }) {
      return {
        allowClear: true,
        api: getDictTypeListApi,
        labelField: 'label',
        valueField: 'intValue',
        params: {
          type: DICT.MODEL_CLASSIFY,
        },
        onChange(v) {
          if (v) {
            if (modelList.length) {
              const obj = modelList.find((i) => i.modelId === formModel.listModelId);
              if (obj) {
                formModel.listModelId = null;
              }
            }
          } else {
            formModel.listModelId = null;
          }
          listModuleParam.classify = v;
          // if ([MODEL_TYPE.LIST, MODEL_TYPE.COMPLEX].includes(v)) {
          //   formModel.path = modelCompenentName[v];
          // }
          // listModuleParam.classify = v;
          // if (formModel.listModelId) {
          //   formModel.listModelId = undefined;
          // }
        },
        getPopupContainer: () => document.body,
      };
    },
  },
  {
    required: true,
    field: 'listModelId',
    label: '模型',
    component: 'ApiSelect',
    ifShow: ({ values }) => values.modelClassify,
    componentProps() {
      return {
        placeholder: '请绑定模型',
        showSearch: true,
        filterOption: false,
        api: async (params) => {
          const data = await getModelAllListApi(params);
          modelList = data;
          return data;
        },
        labelField: 'modelName',
        valueField: 'modelId',
        params: listModuleParam,
        onSearch: useDebounceFn((v) => {
          listModuleParam.modelName = v;
        }, 200),
        getPopupContainer: () => document.body,
      };
    },
  },
  // {
  //   field: 'moduleCode',
  //   label: '菜单编码',
  //   component: 'Input',
  //   required: false,
  // },

  // {
  //   field: 'redirect',
  //   label: '重定向路径',
  //   component: 'Input',
  // },
  // {
  //   field: 'frameSrc',
  //   label: '嵌入Url',
  //   component: 'Input',
  // },
  // {
  //   field: 'menuType',
  //   label: '菜单类型',
  //   component: 'RadioButtonGroup',
  //   defaultValue: 0,
  //   componentProps: {
  //     options: [
  //       { label: '左菜单', value: 0 },
  //       { label: '顶菜单', value: 2 },
  //     ],
  //   },
  //   // colProps: { lg: 24, md: 24 },
  // },
  // {
  //   field: 'modType',
  //   label: '功能类型',
  //   component: 'RadioButtonGroup',
  //   defaultValue: 1,
  //   componentProps: {
  //     options: [
  //       { label: '功能菜单', value: 1 },
  //       {
  //         label: '目录菜单',
  //         value: 0,
  //       },
  //     ],
  //   },
  //   ifShow: (data) => {
  //     const { values } = data;

  //     return !isFunctionMenu(values.menuType);
  //   },
  // },

  // {
  //   field: 'typeRight',
  //   label: '权限设置',
  //   component: 'RadioButtonGroup',
  //   defaultValue: 1,
  //   componentProps: {
  //     options: [
  //       { label: '继承上级权限', value: 0 },
  //       { label: '使用自身权限', value: 1 },
  //     ],
  //   },
  // },
  // {
  //   field: 'modRight',
  //   label: '权限限制',
  //   component: 'RadioButtonGroup',
  //   defaultValue: 1,
  //   componentProps: {
  //     options: [
  //       { label: '缺省全部可用', value: 0 },
  //       { label: '限制部分用户使用', value: 1 },
  //     ],
  //   },
  // },

  {
    field: 'typeStatus',
    label: '状态',
    component: 'RadioGroup',
    defaultValue: 0,
    componentProps: {
      options: [
        { label: '启用', value: 0 },
        { label: '禁用', value: 1 },
      ],
    },
  },

  {
    field: 'visible',
    label: '显示状态',
    component: 'RadioGroup',
    defaultValue: 1,
    componentProps: {
      options: [
        { label: '显示', value: 1 },
        { label: '隐藏', value: 0 },
      ],
    },
  },

  {
    field: 'typeEx2Name',
    label: '是否开启权限',
    component: 'Switch',
    defaultValue: 0,
    componentProps: {
      checkedValue: 1,
      unCheckedValue: 0,
    },
    // ifShow: ({ values }) => {
    //   console.log(values);
    //   return !isFunctionMenu(values.modType);
    // },
  },
  {
    field: 'typeEx5Name',
    label: 'APP本地图标路径',
    component: 'Input',
  },
  {
    field: 'icon',
    label: '图标',
    component: 'HUpload',
    required: true,
    defaultValue: [],
    componentProps: {
      title: '图片上传',
      showFileName: false,
    },

    // rules: [{ required: true, message: '请选择图标', trigger: 'change' }],
  },
  // {
  //   field: 'keepAlive',
  //   label: '是否缓存',
  //   component: 'Switch',
  //   defaultValue: 1,
  //   componentProps: {
  //     checkedValue: 1,
  //     unCheckedValue: 0,
  //   },
  //   ifShow: ({ values }) => !isFunctionMenu(values.menuType),
  // },
  // {
  //   field: 'extMeta',
  //   label: '路由meta',
  //   component: 'InputTextArea',
  //   colProps: { lg: 24 },
  //   defaultValue: '{}',
  //   componentProps: {
  //     rows: 4,
  //   },
  // },
];
